<template>
  <view class="login-container">
    <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
    <button type="primary" class="btn-login" @click="getUserProfile">一键登录</button>
    <view class="v">
      登陆后享受更多权益
    </view>
  </view>
</template>

<script>
  import {mapMutations} from 'vuex';
  export default {
    name:"my-login",
    data() {
      return {
        
      };
    },
    methods:{
      ...mapMutations('m_user',['updateUserInfo','getToken','updateToken']),
      async getUserProfile(){
        let [error,success] = await uni.getUserProfile({desc:'你的授权信息'})
          
        if(error && error.errMsg == 'getUserProfile:fail auth deny'){
        uni.$showMsg('您取消了授权');
        return;
        }
        // 表示用户【‘同意’】授权。
        console.log(success);
        // 表示用户【‘同意’】授权。获取用户的基本信息
        this.updateUserInfo(success.userInfo);
        				
        // 同时获取token
        this.getToken(success);
      },
      // 调用登录接口，换取永久的 token
      	async getToken(info) {
      			// 调用微信登录接口
      		const [err, res] = await uni.login({
          provider: 'univerify',
          univerifyStyle: { 
            fullScreen: true
          }
      }).catch(err => err)
      				// 判断是否 uni.login() 调用失败
      				if (err || res.errMsg !== 'login:ok'){
      					uni.$showMsg('登录失败！');
      					return;
      				}
      				// 准备参数对象
              console.log(res);
      				const query = {
      					code: res.code,
      					encryptedData: info.encryptedData,
      					iv: info.iv,
      					rawData: info.rawData,
      					signature: info.signature
      				};
      				
      				// 获取到code之后,调用后端接口换取token,此处的后端接口调用有问题,模拟token生成
      				let token = 'HelloWorld';
      				
      				uni.$showMsg('登录成功');
              this.updateToken(token) 
              console.log(token);
      			}
    }
  }
</script>

<style lang="scss">
	.login-container {
	  // 登录盒子的样式
	  height: 750rpx;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  background-color: #f8f8f8;
	  position: relative;
	  overflow: hidden;
	
	  // 绘制登录盒子底部的半椭圆造型
	  &::after {
	    content: ' ';
	    display: block;
	    position: absolute;
	    width: 100%;
	    height: 40px;
	    left: 0;
	    bottom: 0;
	    background-color: white;
	    border-radius: 100%;
	    transform: translateY(50%);
	  }
	
	  // 登录按钮的样式
	  .btn-login {
	    width: 90%;
	    border-radius: 100px;
	    margin: 15px 0;
	    background-color: #c00000;
	  }
	
	  // 按钮下方提示消息的样式
	  .tips-text {
	    font-size: 12px;
	    color: gray;
	  }
	}
</style>